<template>
  <div class="w-full h-32 pl-10 pr-10">
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="弹窗用法说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
</script>

<script lang="ts">
  function getDoc() {
    return `

### BasicModal 简介
>vben 对 antd Modal 进行了二次封装, 封装的组件名称为 BasicModal, 简化了一些操作
* [ant modal 官方文档](https://www.antdv.com/components/modal-cn)
* [vben modal官方文档](https://doc.vvbin.cn/components/modal.html)

### BasicModal 规范
* 弹窗内的逻辑应该聚合，封装到一个独立的 .vue 文件中
* 与父组件最多只保持一个 入参 和 出参的交互方式
* 弹窗的打开由父组件操作，弹窗的关闭由 弹窗组件控制。
* 父组件可以向弹窗组件传递参数，弹窗组件关闭时可回调父组件方法，向父组件传递参数

`;
  }

  function getSource() {
    return `

### Modal 组件
\`\`\`html

<template>
  <!--
    1.子组件必须添加 v-bind="$attrs", 将本组件的父组件中自定义属性和方法传给本组件的子组件中，即通过父传孙的方式传递给 antd 的原生 Modal组件中
    2.弹窗的参数属性参数通过 :xxx 设置, 方法参数通过 @xxx 制定
    3.虽然弹窗的属性和方法参数都可以在父组件中设置，但是不建议在父组件中设置弹窗相关的参数，遵守内聚原则，全部在子属性中设置。
    -->
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="Modal Title"
    :helpMessage="['提示1', '提示2']"
    :centered="false"
    :canFullscreen="false"
    :closable="true"
    :maskClosable="true"
    :mask="true"
    :width="520"
    :destroyOnClose="true"
  >
    <!-- 窗口内容区域-->
    <a-button type="primary" @click="doCloseModal" class="mr-2"> 关闭 </a-button>
    <a-button type="primary" @click="changeModalParams"> 修改窗口参数 </a-button>
  </BasicModal>
</template>

\<script lang="ts" setup\>
  // BasicModal 和 useModalInner 为 vben 基于 ant Modal 封装的组件
  import { BasicModal, useModalInner } from '@/components/Modal';

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeModal, setModalProps }] = useModalInner();

  // 关闭弹窗方法
  function doCloseModal() {
    // 如果没有额外的逻辑，可以直接将 closeModal 绑定到按钮上
    closeModal();
  }

  // 内部改变弹窗参数
  function changeModalParams() {
    // 通过 setModalProps 方法修改弹窗参数
    setModalProps({
      title: '新的名称',
      helpMessage: '新的提示信息',
      showCancelBtn: false,
      okText: 'ok',
    });
  }


\</script\>
\`\`\`

#### 父组件

\`\`\`html
\<template\>
  <!-- @click 直接绑定 userModal 的方法即可。如果想做一些判断，可以再套一层方法 -->
  <a-button type="primary" class="mt-4 mb-4" @click="openModal"> 打开弹窗 </a-button>

  <!-- 任意位置，引入弹窗组件 -->
  <ModalSimple @register="register" :closeFunc="clickCloseCallBack" />
\</template\>

\<script lang="ts" setup\>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 自定义 modal 组件
  import ModalSimple from './ModalSimple.vue';

  // vben modal 组件
  import { useModal } from '@/components/Modal';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openModal }] = useModal();

  // 弹窗关闭前的回调方法，返回 true 弹窗关闭，返回 false 弹窗不关闭
  function clickCloseCallBack() {
    console.log('弹窗关闭，可以触发刷新表格数据的方法了');

    return true;
  }
\</script\>

\`\`\`

`;
  }
</script>
